Load large Dropdown choices progressively on scroll - #13805
Open
abidlabs wants to merge 18 commits into
Open
Conversation
Collaborator
🪼 branch checks and previews
Install Gradio from this PR pip install https://huggingface.co/buckets/gradio/pypi-previews/resolve/8459129f5651cec1535665652bdbba094238fd95/gradio-6.26.0-py3-none-any.whlInstall Gradio Python Client from this PR pip install "gradio-client @ git+https://github.com/gradio-app/gradio@8459129f5651cec1535665652bdbba094238fd95#subdirectory=client/python"Import Gradio JS Client from this PR via CDN import { Client } from "https://huggingface.co/buckets/gradio/npm-previews/resolve/8459129f5651cec1535665652bdbba094238fd95/browser.js"; |
Collaborator
🦄 change detectedThis Pull Request includes changes to the following packages.
|
Member
Author
Before / after SpacesBoth public Spaces run the same 70,000-choice
The filter text was |
…es-list-is-4-slower-
…opdown-with-large-choices-list-is-4-slower-
…-large-choices-list-is-4-slower-' into fix/issue-13340-gr-dropdown-with-large-choices-list-is-4-slower-
Comment on lines
141
to
142
| filtered_indices = handle_filter(choices, "", visible_values_limit); | ||
| active_index = selected_index; |
Comment on lines
+1046
to
+1052
| const { container, getAllByTestId } = await render(Dropdown, { | ||
| ...multiselect_props, | ||
| max_values_shown: 2 | ||
| }); | ||
|
|
||
| const input = container.querySelector("input") as HTMLInputElement; | ||
| await input.focus(); |
| container = true, | ||
| allow_custom_value = false, | ||
| filterable = true, | ||
| max_values_shown = 100, |
| export interface DropdownProps { | ||
| multiselect: boolean; | ||
| max_choices: number | null; | ||
| max_values_shown: number | null; |
…opdown-with-large-choices-list-is-4-slower-
dawoodkhan82
requested changes
Sep 1, 2026
dawoodkhan82
left a comment
dawoodkhan82
left a comment
Collaborator
There was a problem hiding this comment.
I think there needs to be a "see more" at the end of the 100 options, to load additional options. As a user, if I don't know what I'm looking for I may need to browse further.
abidlabs
changed the title
Member
Author
|
Thanks @dawoodkhan82 for the suggestion. Agreed that the previous UI would be misleading. At the same time, I didn't want the user to have to click the "show more" button so instead I added a scroll: Screen.Recording.2026-09-01.at.3.34.40.PM.mov |
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Keyboard users cannot reach unloaded choices, selected-option scrolling regresses, and the hand-authored changeset violates repository guidance.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
- Files reviewed: 12/12 changed files
- Comments generated: 5
- Review effort level: Balanced
Comment on lines
+208
to
+210
| update_filtered_choices( | ||
| is_filtering ? input_text : "", | ||
| visible_choices_limit |
Comment on lines
+49
to
+52
| const result = handle_filter_with_count( | ||
| translated_choices, | ||
| input_text, | ||
| visible_choices_limit |
Comment on lines
+1
to
+6
| --- | ||
| "@gradio/dropdown": minor | ||
| "gradio": minor | ||
| --- | ||
|
|
||
| feat:Load large Dropdown choices progressively on scroll |
Member
Author
Comment on lines
+209
to
+210
| <span class="sr-only" aria-live="polite"> | ||
| {filtered_indices.length} choices shown, {remaining_choices} remaining |
…opdown-with-large-choices-list-is-4-slower-
…-large-choices-list-is-4-slower-' into fix/issue-13340-gr-dropdown-with-large-choices-list-is-4-slower-
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Large filterable Dropdowns rendered every matching choice, creating tens of thousands of DOM nodes and making opening and filtering slow. This PR adds
num_choices_shown(default:100), which controls the initial number of matching choices rendered and the size of each subsequent batch.When the user reaches the bottom of the options list, the next batch loads automatically. The compact Dropdown viewport stays consistent while every matching choice remains browsable without a separate “Show more” control. Setting
num_choices_shown=Nonerenders all matching choices immediately.The selected single-select option remains available when it falls beyond the initial batch, and the options list announces the number shown and remaining for assistive technology.
Closes: #13340
Closes: #8396
AI Disclosure
Testing and Formatting
CI=1 pnpm exec vitest run --config .config/vitest.config.ts js/dropdown/dropdown.test.ts(131 passed, 4 todo)python3 -m pytest test/components/test_dropdown.py -q(2 passed)pnpm ts:checkreports 16 existing errors outside the Dropdown files